<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery.js"></script>
		<script type="text/javascript" src="../js/bootstrap.js"></script>
		<link rel="stylesheet" href="../css/bootstrap/bootstrap.min.css" />
		<script type="text/javascript" src="../js/angular.min.js"></script>
	</head>

	<body ng-app="myapp" ng-controller="myctrl">
		<table class="table table-bordered">
			<tr>
				<td>商品序号</td>
				<td>商品编号</td>
				<td>商品名称</td>
				<td>商品价格</td>
			</tr>
			<tr ng-repeat="product in products">
				<td>{{$index+1}}</td>
				<td>{{product.id}}</td>
				<td>{{product.name}}</td>
				<td>{{product.price}}</td>
			</tr>
		</table>
		<div>
			<ul class="pagination pull-right">
				<li>
					<a href ng-click="pre()">上一页</a>
				</li>
				<li ng-repeat="page in pageList" ng-class="{active:isActivePage(page)}">
					<a href ng-click="selectPage(page)">{{page}}</a>
				</li>
				<li>
					<a ng-click="next()" class="btn btn-default" href role="button">下一页</a>
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		//初始化myapp模块
		var myapp = angular.module("myapp", []);
		//定义模块的控制器
		myapp.controller('myctrl', ["$scope", "$http", function($scope, $http) {
			$scope.currentPage = 1; //当前页(请求数据)
			$scope.pageSize = 4; //每页显示条数(请求数据)
			$scope.totalCount = 0; //总记录数(响应数据)
			$scope.totalPages = 0; //总页数(根据响应回来的总条数和pageSize计算得到)

			//在分页工具条显示的页码集合
			$scope.pageList = new Array();

			//点击上一页
			$scope.pre = function() {
				$scope.selectPage($scope.currentPage - 1);
			}
			//点击下一页
			$scope.next = function() {
				$scope.selectPage($scope.currentPage + 1);
			}
			//点击当前页
			$scope.selectPage = function(page) {
				//对传进来的当前页做一个判断
				if($scope.totalPages != 0) {
					if(page < 1) {
						page = 1;
					} else if(page > $scope.totalPages) {
						page = $scope.totalPages;
					}
				}
				
				/*	if($scope.totalPages!=0){
						if(page<1 || page>$scope.totalPages){
							return;
						}
					}
					*/
				//处理完传过来的当前页，发送请求
				$http({
					method: 'GET',
					url: '6_' + page + '.json',
					params: {
						page: page,
						pageSize: $scope.pageSize
					}
				}).success(function(data, status, headers, config) {
					$scope.products = data.products;
					//总记录数
					$scope.totalCount = data.totalCount;
					//总页数
					$scope.totalPages = ($scope.totalCount - 1) / $scope.pageSize;
					//当前页
					$scope.currentPage = page;

					//处理显示页面工具条的值
					var start;
					var end;
					//开始页
					start = page - 5;
					if(start < 1) {
						start = 1;
					}
					//最后页
					end = start + 9;
					if(end > $scope.totalPages) {
						end = $scope.totalPages
					}
					//根据最后页修正开始页
					start = end - 9;
					if(start < 1) {
						start = 1;
					}
					for(var i = start; i <= end; i++) {
						$scope.pageList.push(i);
					}
				}).error(function(data, status, headers, config) {
					alert("服务器忙");
				});
			}
			//是否选中了当前页
			$scope.isActivePage = function(page) {
				return page === $scope.currentPage;
			}
			
			//选中第一页
			$scope.selectPage(1);
		}]);
	</script>

</html>